<template>
  <div class="auto-scale-container" :style="{ zoom: scale }">
    <slot :scale="scale"></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';

export default defineComponent({
  name: 'AutoScaleContainer',
  setup(_, { slots }) {
    const scale = ref(1); // 初始缩放比例

    // 计算缩放比例
    const calculateScale = () => {
      const baseWidth = 480; // 设计稿宽度
      const windowWidth = window.innerWidth; // 当前浏览器宽度
      scale.value = windowWidth / baseWidth; // 计算缩放比例
    };

    // 监听窗口变化
    const onResize = () => {
      calculateScale();
    };

    // 组件挂载时初始化
    onMounted(() => {
      calculateScale();
      window.addEventListener('resize', onResize);
    });

    // 组件卸载时移除监听
    onUnmounted(() => {
      window.removeEventListener('resize', onResize);
    });

    return {
      scale,
    };
  },
});
</script>

<style scoped>
.auto-scale-container {
  width: 480px; /* 设计稿宽度 */
  transform-origin: top left; /* 缩放基点 */
}
</style>
